<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>居中测试</title>
        <style>
            * {/* body本身自带的有内外间距
                  去除所有元素的内外间距*/
                margin: 0;
                padding: 0;
            }
            /*起辅助*/
            .main {
                background-color: lightgreen;
            }
            .card{/*我是内容的设置*/
                width: 200px;
                height: 300px;
                background-color: pink;
                border: 3px solid #000;/*设置边框*/
            }
            .center{
                background-color: lightblue;
                width: 1000px;
                margin: 0 auto;/*设置版心居中 版心居中后内容也跟着居中*/
                text-align: center;/*文字居中*/
                line-height: 300px;/*文字垂直居中*/
            }

        </style>
    </head>
    <body>
        <div class="main"><!--主体-->
            <div class="center"><!--版心-->
                <div class="card">我是内容</div>
                <div class="card">我是内容</div>
                <div class="card">我是内容</div>
                <div class="card">我是内容</div>
            </div>
        </div>
    </body>
</html>